<template>
  <el-card class="demo-card">
    <template #header>
      <h3>虚拟列表</h3>
    </template>
    <div>组件描述</div>
  </el-card>

  <div>
    <VirtualList :data="data" :height="300" :item-height="50" :delay="200">
      <template #default="{ item }">
        <div class="item">
          {{ item }}
        </div>
      </template>
    </VirtualList>
  </div>
</template>

<script setup>
import VirtualList from "@/components/Basic/VirtualList/index.vue";
import { ref } from "vue";
const data = ref(new Array(1000).fill(0).map((_, index) => index));
</script>

<style scoped>
.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
}
.virtual-list {
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.virtual-list :deep(.virtual-item:nth-child(odd)) {
  background: var(--bg-primary);
}
.virtual-list :deep(.virtual-item:nth-child(even)) {
  background: var(--bg-hover);
}
</style>
